<script>
import echarts from 'echarts'
import BaseChart from '@/components/BaseChart.vue'
import { deepClone } from '@/utils'
import { logger } from 'runjs/lib/common'

export default {
  components: {
    BaseChart,
  },
  data() {
    return {
      dateArr: [],
      seriesList: [],
    }
  },
  computed: {
    option() {
      return {
        title: {
          text: '用户付费率走势图',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: { show: false },
          data: this.dateArr,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#eee',
            },
          },
          axisLabel: {
            show: true,
            color: '#666',
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: '#999',
            formatter: '{value} %',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',
            },
          },
        },
        series: this.seriesList,
      }
    },
  },
  mounted() {},
  props: {
    dataList: {
      type: Array,
    },
  },
  watch: {
    dataList(row) {
      this.setEchartData(row)
    },
  },
  methods: {
    setEchartData(row) {
      const sortArr = [...new Set(row?.map(item => item?.date))]
      const seriesArr = [...new Set(row?.map(item => item?.channel))]
      const num = sortArr.sort()
      this.dateArr = num?.map(item => this.$dayjs.unix(item).format('YYYY-MM-DD'))

      this.seriesList = seriesArr?.map(ite => {
        return {
          type: 'line',
          data: sortArr.map(dateItem => {
            const dataItem = row?.find(
              rowItem => rowItem.date == dateItem && rowItem.channel == ite,
            )
            if (dataItem?.active_user_count && dataItem?.pay_user_count) {
              const value = +(
                (dataItem?.active_user_count / dataItem?.pay_user_count) *
                100
              ).toFixed(2)
              return value
            } else {
              return 0
            }
          }),
          name: row?.find(name => name?.channel === ite)?.channel || '未知',
        }
      })
    },
  },
}
</script>

<template>
  <base-chart
    width="100%"
    height="100%"
    :option="option">
  </base-chart>
</template>

<style lang="scss" scoped></style>
